<template>
    <div class="app-container">
        <!-- 顶部 Header 区域       -->
        <mt-header fixed title="我的Vue项目">
            <span slot="left" @click="goBack" v-show="flag">
                <mt-button icon="back">返回</mt-button>
            </span>
        </mt-header>
        <!--  中间的路由 router-view区域      -->

        <!--  因为中间的切换，都是通过router-view进来的，想要动画，就包裹 router-view -->
        <transition name="fade">
            <router-view></router-view>
        </transition>
        <!--底部 Tabbar区域-->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item-hou" to="/home">
                <span class="glyphicon glyphicon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item-hou" to="/member">
                <span class="glyphicon glyphicon-user"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item-hou" to="/shopcar">
                <span class="glyphicon glyphicon-shopping-cart">
                    <span class="mui-badge " id="bage" style="color: #ffffff;background-color: #cf2d28">
                        {{$store.getters.getAllCount}}
                    </span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item-hou" to="/search">
                <span class="glyphicon glyphicon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
        </nav>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                flag:false //只有默认为false首页刚开始才不会有返回按钮

            }
        },
        created(){
            //解决点击了某个页面（非首页），刷新页面后，返回按钮也被
            //隐藏的bug
            this.flag= this.$route.path==='/home'? false:true;

        },
        methods:{
            goBack(){
                //点击返回
                //使用程序化导航
                this.$router.go(-1);
            }
        },
        watch:{//监听
            "$route.path":function (newVal) {
                if (newVal=='/home'){//判断是否回到首页
                    this.flag=false;
                }else {
                    this.flag=true;
                }
            }

        }
    }
</script>
<style lang="scss" scoped>
    .app-container {
        padding-top: 40px;
        overflow-x: hidden;
        /*position: absolute;*/
        padding-bottom: 50px;

        .mint-header {
            z-index: 999;
        }
    }

    .fade-enter {
        opacity: 0;
        transform: translateX(100%);
    }

    .fade-leave-to {
        opacity: 0;
        transform: translateX(-100%);
        /*top: 40px;*/
        position: absolute;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 0.5s ease;
    }

    /* 改类名，解决tabber点击无法切换的问题   */
    /*    .mui-bar-tab .mui-tab-item-hou.mui-active {*/
    /*        color: #007aff;*/
    /*    }*/
    /*    .mui-bar-tab .mui-tab-item-hou {*/
    /*    display: table-cell;*/
    /*    overflow: hidden;*/
    /*    width: 1%;*/
    /*    height: 50px;*/
    /*    text-align: center;*/
    /*    vertical-align: middle;*/
    /*    white-space: nowrap;*/
    /*    text-overflow: ellipsis;*/
    /*    color: #929292;*/
    /*}*/
</style>